<template>
    <div>
        <canvas ref="canvas"></canvas>
    </div>
</template>

<script>
export default {
    mounted() {
        this.canvas = this.$refs.canvas;
        this.ctx = this.canvas.getContext('2d');
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
    },
    methods: {
        drawHeart(x, y, a) {
            this.ctx.beginPath();
            this.ctx.translate(x, y);
            this.ctx.rotate(Math.PI);
            for (let i = 0; i < 50; i++) {
                const step = i / 50 * (Math.PI * 2);
                const vector = {
                    x: a * (16 * Math.pow(Math.sin(step), 3)),
                    y: a * (13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
                };
                this.ctx.lineTo(vector.x, vector.y);
            }
            this.ctx.fillStyle = "red";
            this.ctx.fill();
        },
        onMouseDown(e) {
            const x = e.offsetX;
            const y = e.offsetY;
            const a = 6;
            this.drawHeart(x, y, a);
        }
    },
    mounted() {
        this.canvas = this.$refs.canvas;
        this.ctx = this.canvas.getContext('2d');
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.canvas.addEventListener('mousedown', this.onMouseDown);
    },
    beforeUnmount() {
        this.canvas.removeEventListener('mousedown', this.onMouseDown);
    }
};
</script>

<style scoped>
/* Add any necessary styles here */
</style>